<template>
  <div>
    <!-- <div class="cardBox">
      <el-button
        @click="gobackWay"
        type="text"
        icon="el-icon-arrow-left"
        style="color: rgba(0, 0, 0, 0.85)"
        >返回</el-button
      >
      <el-divider direction="vertical"></el-divider>
      <span>添加供应商</span>
    </div> -->

    <div v-loading="loading">
      <el-row>
        <el-form ref="form" :rules="rules" :model="form" label-width="150px">
          <el-col :span="24">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">供应商信息</div>
              </div>
              <div class="right"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商等级：" prop="supplier_level_id">
              <el-select
                v-model="form.supplier_level_id"
                placeholder="请选择"
                style="width: calc(100% - 50px)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="供应商名称：" prop="supplier_name">
              <el-input
                size="small"
                maxlength="20"
                show-word-limit
                placeholder="请输入供应商名称"
                v-model="form.supplier_name"
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="绑定管理员：" prop="admin_id">
              <el-select
                style="width: calc(100% - 50px)"
                v-model="form.admin_id"
                filterable
                remote
                reserve-keyword
                placeholder="请选择绑定管理员(输入名称可查询)"
                :remote-method="bindingAdminList"
                :loading="loading"
              >
                <el-option
                  v-for="item in adminUserList"
                  :key="item.id"
                  :label="item.nickname + '(' + item.phone + ')'"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序：" prop="sort">
              <el-input
                size="small"
                onkeyup="value=value.replace(/\D/g,'')"
                placeholder="请输入排序(数字越大越靠前)"
                v-model="form.sort"
                maxlength="10"
                show-word-limit
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="状态是否正常：" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio label="1">正常</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input
                type="textarea"
                maxlength="200"
                show-word-limit
                placeholder="请输入..."
                v-model="form.remark"
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="informationTitleView">
              <div class="leftBox">
                <div class="leftborder"></div>
                <div class="text">地址信息</div>
              </div>
              <div class="right"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省市区：" prop="shengshiqu">
              <el-cascader
                v-model="value"
                :options="citys"
                :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
                @change="handleChange"
                style="width: calc(100% - 50px)"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商地址：" prop="address">
              <el-input
                size="small"
                placeholder="请输入供应商地址"
                v-model="form.address"
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人姓名：" prop="responsible_person">
              <el-input
                size="small"
                maxlength="10"
                show-word-limit
                placeholder="请输入联系人姓名"
                v-model="form.responsible_person"
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="supplier_mobile">
              <el-input
                type="text"
                size="small"
                maxlength="11"
                show-word-limit
                placeholder="请输入联系电话"
                v-model="form.supplier_mobile"
                style="width: calc(100% - 50px)"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24" style="text-align: right; padding-right: 30px">
            <el-button type="primary" @click="submitForm('form')"
              >保存</el-button
            >
          </el-col> -->
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import TinymceEditor from "@/components/Tinymce";
import { cityList, addSupplier, getlevedList } from "@/api/supplier/index";
import { list } from "@/api/admin/admin";
export default {
  name: "add",
  components: { TinymceEditor },
  data() {
    return {
      loading: true,
      value: "",
      form: {
        supplier_level_id: "", //等级ID
        supplier_name: "", //供应商名字
        responsible_person: "", //负责人
        supplier_mobile: "", //电话
        // supplier_memo: "", //备注
        address: "", //地址
        sort: "", //排序
        status: "1", //状态
        remark: "", //备注
        province_id: "",
        city_id: "",
        county_id: "",
        id: "",
        admin_id: "",
      },
      citys: [],
      options: [],
      rules: {
        supplier_level_id: [
          { required: true, message: "请输入供应商等级ID", trigger: "blur" },
        ],
        supplier_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g
              if (req.test(value)) {
                return callback(new Error('不能包含特殊字符'))
              } else {
                callback()
              }
            },
            trigger: "change",
          }
        ],
        shengshiqu: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.value == "" || this.value == []) {
                return callback(new Error("请选择省市区"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        responsible_person: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                return callback(new Error("请输入联系人姓名"));
              } else {
                if (req.test(value)) {
                  return callback(
                    new Error("联系人姓名中不能有特殊字符和数字")
                  );
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        supplier_mobile: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号格式不正确"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      }, //表单验证
      bindingAdminSearch: false,
      adminUserList: [],
    };
  },
  mounted() {
    const p1 = new Promise((req, rej) => {
      if (localStorage.getItem("region")) {
        this.citys = JSON.parse(localStorage.getItem("region"));
        req();
      }else{
        cityList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej();
          return this.$messages.error(res.msg);
        }
        this.citys = res.data;
        req();
      });
      }

    });
    const p2 = new Promise((req, rej) => {
      getlevedList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej();
          return this.$messages.error(res.msg);
        }
        this.options = res.data.list;
        console.log(this.options);
        req();
      });
    });
    const p3 = new Promise((req, rej) => {
      list({ page: 1, limit: 20,type:1 }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej();
          return this.$messages.error(res.msg);
        }
        this.adminUserList = res.data.data;
        req();
      });
    });
    Promise.all([p1, p2, p3])
      .then(() => {
        this.form.supplier_level_id = this.options[0].id;
        this.loading = false;
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    cancel() {
      this.$router.back();
    },
    //等级列表
    getlevedlist() {
      getlevedList().then((res) => {
        this.options = res.data;
        this.form.supplier_level_id = res.data[0].id;
      });
    },
    //选中省市区
    handleChange(value) {
      this.form.province_id = value[0];
      this.form.city_id = value[1];
      this.form.county_id = value[2];
      console.log(value);
    },
    //城市列表
    getcitylist() {
      cityList().then((res) => {
        this.citys = res.data;
      });
    },
    bindingAdminList(query) {
      this.bindingAdminSearch = true;
      list({ page: 1, limit: 20, name: query,type:1 }).then((res) => {
        this.bindingAdminSearch = false;
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.adminUserList = res.data.data;
      });
    },
    //确认提交表单
    submitForm(formName) {
      // if (this.form.province_id == "") {
      //   this.$messages.info("请选择所在城市");
      //   return;
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          addSupplier(this.form).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.loading = false;
              this.$messages.error(res.msg);
              return;
            }
            this.loading = false;
            this.$messages.success("添加成功");
            setTimeout(() => {
              this.$parent.addressClose();
            }, 1500);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //切换商品类型
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gobackWay() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss">
#app-container .el-select .el-input {
  width: 440px !important;
}
</style>
